<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="theme-color" content=""/>
    <meta name="description" content=""/>
    <title>React App</title>
    <style>
        /* 具体样式 */
        #outer {
            display: flex;
            justify-content: center;
            align-items: center;
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            width: 200px;
            height: 200px;
            background: #00b578;
        }

        #inner {
            width: 100px;
            height: 100px;
            background: #108ee9;
        }
    </style>
</head>
<body>
<div id="root" class="center">
    <div id="outer" class="center">
        <div id="inner" class="center"></div>
    </div>
</div>
<script>
    const root = document.querySelector("#root"),
        outer = document.querySelector("#outer"),
        inner = document.querySelector("#inner")

    //  经过视图渲染解析，有 onXXX / onXXXCapture 这样的属性
    outer.onClick = () => {
        console.log('outer 冒泡[合成]')
    }
    outer.onClickCapture = () => {
        console.log('outer 捕获[合成]')
    }

    inner.onClick = () => {
        console.log('inner 冒泡[合成]')
    }
    inner.onClickCapture = () => {
        console.log('inner 捕获[合成]')
    }

    // 给#root做事件绑定
    root.addEventListener('click', (ev) => {
        let path = ev.path || (ev.composedPath && ev.composedPath()) || [];
        [...path].reverse().forEach((ele) => {
            let handle = ele.onClickCapture;
            if (handle) handle()
        })
    }, true);
    root.addEventListener('click', (ev) => {
        let path = ev.path || (ev.composedPath && ev.composedPath()) || [];
        path.forEach((ele) => {
            let handle = ele.onClick;
            if (handle) handle()
        })
    }, false);
</script>
</body>
</html>